<template>
	<view>
		<view>
			<uni-list style="width:95%">
				<uni-section title="所有支出" :subTitle="'共¥' + totalCost + '元'" type="circle"></uni-section>
				<text class="tips" v-if="costList.length <= 0">无消费记录</text>
				<uni-list-chat 
				v-for="(item,index) in costList"
				:title="item.employee.realName == null || item.employee.realName == '' ? item.employee.nickName : item.employee.realName" 
				:key="index"
				:note="item.reimbursement.title + '  ' + (item.reimbursement.auditReimStatus == 'DONE' ? '已报销' : '未报销')" 
				:avatar="item.employee.avatar"
				:time="item.createTime"
				:badgeText="'¥' +  item.reimbursement.cost + '元'">
				</uni-list-chat>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				costList: [],
				totalCost: 0,
			}
		},
		onLoad(ev){
			this.getReimbursement(ev.id);
		},
		methods: {
			getReimbursement(teamId){
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("queryReimByTeam", token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"teamId": teamId
						},
				    	success: data => {
							this.costList = data.data;
							var totalCost = 0;
							if(this.costList.length > 0) {
								this.costList.forEach(e => {
									totalCost += Number(e.reimbursement.cost);
								})
							}
							this.totalCost = totalCost;
						}
					})
				}
			},
		}
	}
</script>

<style>
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
	.tips{
		padding:10rpx 20rpx;
		text-align: left;
		font-size: 24rpx;
		color: #0077AA;
	}
</style>
